<template>
    <div class="product">
          <div 
          class="select" 
          :class="{active:item.isChecked}"  @click="selectClick"></div>
          <div class="left">
            <img :src="item.image" alt="">
          </div>
          <div class="right">
            <div class="title">{{item.title}}</div>
            <div class="price">
              <span class="money">￥{{item.price}}</span>
              <span>{{item.count}}</span>
            </div>
          </div>
    </div>
</template>

<script>
export default {
  name:'CartItem',
  props:{
    item:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  methods:{
    selectClick(){
      this.item.isChecked = !this.item.isChecked
    }  
  }
}
</script>

<style scoped>
.product{
  display: flex;
  width: 100%;
  font-size: 14px;
  margin: 10px 0;
  border-bottom: 1px solid #eee;
}

.product .select{
  width: 20px;
  height:20px;
  margin: 30px 0 0 10px;
  border-radius: 50%;
  border:2px solid #eee;
}
.product .active{
  background-image: url('~assets/img/cart/tick.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-color:var(--color-tint) ;
  border: none;
}
.product .left {
  flex:2;
  text-align: center;
}
.product .left img{
  width: 80px;
  height: 80px;
  margin: 5px;
}
.product .right{
  flex:4;
  display:flex;
  flex-direction: column;
  margin:10px 15px 10px 0;

}
.product .right .title{
  flex: 1;
}
.product .right .price{
  display: flex;
  justify-content: space-between;
}
.product .right .price .money{
  color: var(--color-tint);
}
</style>